import './App.css';
import React from 'react';
import { Button, Toast, WhiteSpace, Tabs, List, NavBar, Icon, WingBlank, Checkbox, Radio, Accordion, NoticeBar, Result, Badge, Card } from 'antd-mobile';
import moment from 'moment';
import { connect } from 'react-redux';
import * as request from './request';
import Toolbar from "./Toolbar";
import LineRadar from './LineRadar';
import Header from "./Header";

const Item = List.Item;
const Brief = Item.Brief;
const apiURL = "/api/services/app/Edu_Children/Get?id=";
const scoreNote = function (score) {
    if (score >= 100) {
        return <Badge text="优秀" style={{ padding: '0 3px', backgroundColor: '#4CAF50', borderRadius: 10 }} />;
    }
    else if (score > 90) {
        return <Badge text="良好" style={{ padding: '0 3px', backgroundColor: '#2196F3', borderRadius: 10 }} />;
    }
    else if (score > 80) {
        return <Badge text="中等" style={{ padding: '0 3px', backgroundColor: '#2196F3', borderRadius: 10 }} />;
    }
    else if (score >= 60) {
        return <Badge text="合格" style={{ padding: '0 3px', backgroundColor: '#FFC107', borderRadius: 10 }} />;
    }
    else if (score <= 0) {
        return <Badge text="无" style={{ padding: '0 3px', backgroundColor: '#999', borderRadius: 10 }} />;
    }
    else {
        return <Badge text="偏低" style={{ padding: '0 3px', backgroundColor: '#F44336', borderRadius: 10 }} />;
    }
}
const totNote = function (score) {
    if (score >= 500) {
        return <Badge text="优秀" style={{ padding: '0 3px', backgroundColor: '#4CAF50', borderRadius: 10 }} />;
    }
    else if (score >= 450) {
        return <Badge text="良好" style={{ padding: '0 3px', backgroundColor: '#2196F3', borderRadius: 10 }} />;
    }
    else if (score >= 400) {
        return <Badge text="中等" style={{ padding: '0 3px', backgroundColor: '#2196F3', borderRadius: 10 }} />;
    }
    else if (score >= 300) {
        return <Badge text="合格" style={{ padding: '0 3px', backgroundColor: '#FFC107', borderRadius: 10 }} />;
    }
    else if (score <= 0) {
        return <Badge text="无" style={{ padding: '0 3px', backgroundColor: '#999', borderRadius: 10 }} />;
    }
    else {
        return <Badge text="偏低" style={{ padding: '0 3px', backgroundColor: '#F44336', borderRadius: 10 }} />;
    }
}
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            babyData: {
                name: '',
                birthday: '2020-1-1'
            },
            dataSource: [],
            dataDtl: [],
            open: false,
            title: '儿童评测',
            score: 0,
            modal1: false,
            initialPage: 0,
        }
    }
    componentDidMount() {
        this.fetchData();
    }
    fetchData = () => {
        var cid = this.props.match.params.childid;
        if (!cid) {
            cid = localStorage.getItem('childid');
        }
        this.getBabyData(cid)
    }
    getBabyData = (cid) => {
        if (cid) {
            Toast.loading('Loading...', 0);
            request.get(apiURL + cid)
                .then((data) => {
                    if (data.result) {
                        this.setState({ babyData: data.result })
                    }
                    Toast.hide();
                })
                .catch((error) => {
                    console.log('fetch data failed', error);
                });
        }
    }
    doPreTest = () => {
        const { babyData } = this.state;
        if (babyData.correctAge >= 12) {
            Toast.info('您的宝宝已经不需要进行五大能力评测了！');
        }
        else {
            this.props.history.push('/BabyTest')
        }
    }
    selectBaby = (babyData) => {
        this.setState({ babyData })
        this.getBabyData(babyData.id)
    }
    render() {
        const { babyData } = this.state;
        let totalScore = parseInt(babyData.abilityGreatAth) + parseInt(babyData.abilityFineMotion) + parseInt(babyData.abilityCognitive) + parseInt(babyData.abilitySocial) + parseInt(babyData.abilityLang)
        totalScore = !totalScore ? 0 : totalScore
        return (
            <div>
                {/* <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => this.props.history.go(-1)}
                    style={{ width: '100%' }}>五大能力评估</NavBar> */}
                <Header state={this.props} selectBaby={this.selectBaby} />
                <WhiteSpace size="md" />
                <WingBlank size="md">
                    <Card>
                        <Card.Body>
                            <Accordion className="my-accordion">
                                <Accordion.Panel header={'宝宝档案：' + babyData.name + ' ' + babyData.correctAge + '个月'}>
                                    <List className="my-list">
                                        <Item extra={babyData.name}>姓名</Item>
                                        <Item extra={moment(babyData.birthday).format("YYYY-MM-DD")}>出生日期</Item>
                                        <Item extra={babyData.sex}>性别</Item>
                                        <Item extra={babyData.weight + ' kg'}>体重</Item>
                                        <Item extra={babyData.gweek + '周'}>胎龄</Item>
                                        <Item extra={(babyData.gweek < 40 ? babyData.correctGestionalAge : babyData.correctAge) + (babyData.gweek < 40 ? "周" : "月")}>{babyData.gweek < 40 ? "纠正胎龄" : "纠正月龄"}</Item>

                                    </List>
                                </Accordion.Panel>
                            </Accordion>
                            <WhiteSpace size="md" />
                            <LineRadar babyData={babyData} />
                            <div style={{ paddingLeft: '25%' }}>总分<span style={{ padding: '10px', fontSize: 36, fontWeight: 'bold' }}>{totalScore.toString()}</span>{totNote(totalScore)}</div>
                            <WhiteSpace size="lg" />
                            <List className="my-list">
                                <Item extra={scoreNote(babyData.abilityGreatAth)} wrap>1、大运动能力 </Item>
                                <Item extra={scoreNote(babyData.abilityFineMotion)} wrap>2、精细运动能力 </Item>
                                <Item extra={scoreNote(babyData.abilityCognitive)} wrap>3、认知及适应能力 </Item>
                                <Item extra={scoreNote(babyData.abilitySocial)} wrap>4、社交与情绪 </Item>
                                <Item extra={scoreNote(babyData.abilityLang)} wrap>5、语言与交流能力 </Item>
                            </List>
                            <WhiteSpace size="lg" />
                            <Button type="primary" onClick={this.doPreTest}>开始评测</Button>
                            <WhiteSpace size="lg" />
                            <Badge text="说明" hot />
                            <p style={{ color: '#666' }}>1.五大能力中，每大项合计分80分为中等，＞90为良好，＞100为优秀，60-80分为合格，需密切观察，并在1-2个月强化教育后复查；若未见改善，需到医院进行诊治。</p>
                            <p style={{ color: '#666' }}>2.五大能力中，总分400分为中等，＞450为良好，＞500为优秀，300-400分为合格，需密切观察，并在1-2个月强化教育后复查；若未见改善，需到医院进行诊治，最后老师、医生、家长共同制定个体化教学方案。</p>
                            <NoticeBar marqueeProps={{
                                loop: true
                            }}>此评估只作参考，不代表医师建议也不可作为治疗数据参考</NoticeBar>

                            <WhiteSpace size="lg" />
                            <WhiteSpace size="lg" />
                            <WhiteSpace size="lg" />
                        </Card.Body>
                    </Card>

                </WingBlank>
                <Toolbar history={this.props.history} selectedTab='Child' />
            </div>
        )
    };
}

export default connect(
    state => ({ currentUser: state.setCurrentUser, currentChild: state.setCurrentChild })
)(App)
